<!DOCTYPE html>
<html lang="en">
<head>
    <#include "/WEB-INF/views/common/meta.html" />
    <title>设备监控</title>
    <#include "/WEB-INF/views/common/css.html"/>
    <link rel="stylesheet" type="text/css" href="/static/themes/css/index_v1.css"/>
</head>
<body>
<header id="header" class="mui-bar mui-bar-nav bg-blue">
    <a class="mui-icon mui-icon-more mui-pull-right" href="/device/list"></a>
    <h1 class="mui-title">
        <#if deviceList??&&deviceList?size gt 0>
            ${deviceList[0].deviceCode}
        <#else>
            暂无设备
        </#if>
    </h1>
</header>

<nav id="footer" class="mui-bar mui-bar-tab">
    <a class="mui-tab-item mui-active" href="#tabbar-map">
        <span class="mui-icon mui-icon-map"></span>
        <span class="mui-tab-label">位置</span>
    </a>
    <a class="mui-tab-item" href="#tabbar-setup">
        <span class="mui-icon mui-icon-gear"></span>
        <span class="mui-tab-label">设置</span>
    </a>
</nav>

<div class="mui-content">
    <div id="tabbar-map" class="mui-control-content mui-active">
        <div id="mapContainer" class="mapContainer"></div>
        <div class="mapTopLeft">
            <div>${deviceInfo}</div>
        </div>
        <div class="mapTopRight">
            <#if deviceList??&&deviceList?size gt 0>
                <!--<div><a href="/device/trackQuery?deviceCode=${deviceList[0].deviceCode}">历史轨迹</a></div>-->
                <!--<div><a href="javascript:void(0);" onclick="devicePosition('${deviceList[0].deviceCode}');">设备位置</a></div>-->
                <div><a href="/device/trackQuery?deviceCode=${deviceList[0].deviceCode}"><img src="/static/themes/images/map/mapicon-1.png" width="47px"/></a></div>
                <div><a href="javascript:void(0);" onclick="devicePosition('${deviceList[0].deviceCode}');"><img src="/static/themes/images/map/mapicon-2.png" width="47px"/></a></div>
            </#if>
            <!--<div><a href="javascript:void(0);" onclick="myPosition();">我的位置</a></div>-->
            <div><a href="javascript:void(0);" onclick="myPosition();"><img src="/static/themes/images/map/mapicon-3.png" width="47px"/></a></div>
        </div>
    </div>

    <div id="tabbar-setup" class="mui-control-content">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell" style="margin-top:5px;">
                当前账号：${currentUser.userName}
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right" href="/user/info">
                    个人设置
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right" href="/user/modifyPwdPage">
                    修改密码
                </a>
            </li>
        </ul>
        <ul class="mui-table-view" style="margin-top: 25px;">
            <li class="mui-table-view-cell">
                <a id="logoutBtn" style="text-align: center;color: #FF3B30;" href="/user/logout">
                    退出登录
                </a>
            </li>
        </ul>
    </div>

</div>
</body>
<#include "/WEB-INF/views/common/js.html"/>
<script type="text/javascript" src="/static/js/index.js"></script>
<script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.2&key=535ce99d41c9b7b233cc5051667e06da'></script>
<!-- UI组件库 1.0 -->
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type="text/javascript">
    mui.init({
        swipeBack:true //启用右滑关闭功能
    });

    $("#mapContainer").height($(window).height() - $("#header").height() - $("#footer").height());

    // 创建地图
    var map = new AMap.Map('mapContainer', {
        resizeEnable: true,
        zoom: 15
    })
    // 加载地图控件
    AMapUI.loadUI(['control/BasicControl'], function (BasicControl) {

        //添加一个缩放控件
        map.addControl(new BasicControl.Zoom({
            position: {
                bottom:'20px',
                left:'10px'
            }
        }));

        //图层切换控件
        map.addControl(new BasicControl.LayerSwitcher({
            position:{
                top:'10px',
                right:'10px'
            }
        }));

    });

    var devices = ${deviceList};
    // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
    devices.forEach(function(device) {
        var marker = new AMap.Marker({
            map: map,
            icon:device.icon,
//            icon: new AMap.Icon({
//                size: new AMap.Size(56, 58),  //图标大小
//                image: device.icon
//            }),
            position: device.position
            //offset: new AMap.Pixel(0, 0)
        });

        //鼠标点击marker弹出自定义的信息窗体
        AMap.event.addListener(marker, 'click', function() {
            infoWindow.open(map, marker.getPosition());
        });

        // 设备窗体
        var content = [];
        content.push("<div><b>设备编号</b>：" + device.deviceCode);
        content.push("<b>设备名称</b>：" + device.deviceName);
        content.push("<b>定位时间</b>：" + device.time);
        content.push("<b>主机编号</b>：" + device.ZJID);
        content.push("<b>焊接时间</b>：" + device.HJSJ);
        content.push("<b>焊接总数</b>：" + device.HJZS);
        content.push("<b>项目代号</b>：" + device.XMDH);
        content.push("<b>现场编号</b>：" + device.XCBH);
        content.push("<b>操作工号</b>：" + device.CZGH);
        content.push("<b>管材材质</b>：" + device.GCCZ);
        content.push("<b>管材规格</b>：" + device.GCGG);
        content.push("<b>环境温度</b>：" + device.HJWD);
        content.push("<b>加热温度</b>：" + device.JRWD);
        content.push("<b>熔接压力</b>：" + device.RJYL);
        content.push("<b>保压压力</b>：" + device.BYYL);
        content.push("<b>加热时间</b>：" + device.JRSJ);
        content.push("<b>吸热时间</b>：" + device.XRSJ);
        content.push("<b>转换时间</b>：" + device.ZHSJ);
        content.push("<b>冷却时间</b>：" + device.LQSJ);
        content.push("<b>焊接结果</b>：" + device.HJJG);
        content.push("<b>操作</b>：" +
                "<a href='/device/trackQuery?deviceCode=" + device.deviceCode + "'>轨迹回放</a>&nbsp;&nbsp;" +
                "<a href='/device/weldQuery?deviceCode=" + device.deviceCode + "'>焊接记录</a></div>");
        var infoWindow = new AMap.InfoWindow({
            content: content.join("<br/>"),
            offset: new AMap.Pixel(10, -28)
        });

    })
    map.setFitView();


    /*
     *获取设备位置信息
     */
    function devicePosition(deviceCode){
        $.getJSON("/device/position",{"deviceCode": deviceCode}, function (result) {
            if(result.success){
                //customMarker.setPosition(result.data.coordinate);
                //map.setCenter(customMarker.getPosition());
                map.setCenter(result.data.coordinate);
            }else{
                alert(result.message);
            }
        });

    }




    // 定位当前位置
    var geolocation = null;
    map.plugin('AMap.Geolocation', function () {
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：无穷大
            showButton: false,        //显示定位按钮，默认：true
            zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        });
        map.addControl(geolocation);
    });

    /*
     *获取当前位置信息
     */
    function myPosition(){
        geolocation.getCurrentPosition();
    }

</script>
</html>